// 引入对应的模块
import Vue from "vue"
import VueRouter from "vue-router"
import store from "@/store"

// 注册路由模块
Vue.use(VueRouter)

// 解决重复单击时抛出的 NavigationDuplicated 错误警告
// 原型上修改push方法
//先将之前的储存到一个变量中
const orginPush = VueRouter.prototype.push
const orginRepalace = VueRouter.prototype.replace
// 修改VueRouter原型上的push,用于解决重复跳转的报错问题
VueRouter.prototype.push = function (location, okCallBack, errCallBack) {
  // location 路径
  // okCallBack 成功是回调
  // errCallBack 失败的回调
  if (okCallBack === undefined && errCallBack === undefined) {
    orginPush.call(this, location).catch(() => {})
  } else {
    orginPush.call(this, location, okCallBack, errCallBack)
  }
}
// 修改VueRouter原型上的replace,用于解决重复跳转的报错问题
VueRouter.prototype.replace = function (location, okCallBack, errCallBack) {
  if (okCallBack === undefined && errCallBack === undefined) {
    orginRepalace.call(this, location).catch(() => {})
  } else {
    orginRepalace.call(this, location, okCallBack, errCallBack)
  }
}

// 引入外部模块
// import Home from "../pages/Home"
// import Login from "../pages/Login"
// import Register from "../pages/Register"
// import Search from "../pages/Search"
// import Detail from "../pages/Detail"

// 路由懒加载
const Home = () => import("@/pages/Home")
const Login = () => import("@/pages/Login")
const Register = () => import("@/pages/Register")
const Search = () => import("@/pages/Search")
const Detail = () => import("@/pages/Detail")
const AddCartSuccess = () => import("@/pages/AddCartSuccess")
const ShopCart = () => import("@/pages/ShopCart")

// 设置路由信息
const router = new VueRouter({
  mode: "history",

  routes: [
    {
      path: "/",
      redirect: "/home",
    },
    {
      name: "home",
      path: "/home",
      component: Home,
      meta: {
        isHiddenNav: true,
      },
    },
    {
      path: "/login",
      name: "login",
      component: Login,
      meta: {
        isHiddenFooter: true,
      },
    },
    {
      path: "/register",
      name: "register",
      component: Register,
      meta: {
        isHiddenFooter: true,
      },
    },
    {
      name: "search",
      // path: "/search",
      path: "/search/:keyword?", // 使用params参数,需要添加占位
      component: Search,
    },
    {
      name: "detail",
      path: "/detail/:id",
      // component: Detail,
      // 路由懒加载
      component: Detail,
      // 在此处规则当中添加一个props:true属性的时候,就可以在对应的组件使用props:[]来接收
      props: true,
    },
    {
      name: "addcartsuccess",
      path: "/addcartsuccess",
      component: AddCartSuccess,
    },
    {
      name: "shopcart",
      path: "/shopcart",
      component: ShopCart,
    },
    {
      name: "trade",
      path: "/trade",
      component: () => import("@/pages/Trade"),
    },
    {
      name: "pay",
      path: "/pay",
      component: () => import("@/pages/Pay"),
    },
    {
      name: "paysuccess",
      path: "/paysuccess",
      component: () => import("@/pages/PaySuccess"),
    },
    {
      name: "center",
      path: "/center",
      component: () => import("@/pages/Center"),
    },
  ],

  // 滚动行为
  scrollBehavior(to, from, savedPosition) {
    // to 要跳转到哪个页面
    // from 从哪个页面跳转过来
    // savedPosition 返回之前页面原来的位置
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  },
})

const whiteList = [
  "home",
  "login",
  "register",
  "search",
  "detail",
  "addcartsuccess",
  "shopcart",
]
// 添加路由守卫
router.beforeEach((to, from, next) => {
  // to 要跳转到哪个页面
  // from 从哪个页面跳转过来
  // console.log(to, from)
  if (whiteList.includes(to.name) || store.state.user.userInfo.token) {
    next()
    return
  }
  next({
    name: "login",
    query: {
      // 记录之前访问的页面,登录成功就返回到该页面
      redirect: to.path,
    },
  })
})

// 导出路由模块
export default router
